Mermaid.js UserCSS
code:mermaid
flowchart LR
A-- hello -->B
code:gantt.mmd
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1, 20d
section Another
Task in Another :2014-01-12, 12d
another task :24d
code:HSTS.mmd
sequenceDiagram
participant B as Web Browser
participant S as Web Server
B->>S: HTTP Request
S->>B: HTTP Response with HSTS header
Note over B: Browser recognizes HSTS header and updates its internal HSTS list
B->>S: HTTPS Request
S->>B: HTTPS Response with HTM
code:style.css
.line .mermaid-preview svg {
/* background-color: #fff; */ background-color: var(--code-bg, #fff) !important; &,
& .marker,
& .label {
font-family: var(--page-font-family, "trebuchet ms", verdana, arial), sans-serif, var(--icons, "AppIcons") !important;
font-size-adjust: var(--page-font-size-adjust, .47);
color: var(--quote-text-color, #333) !important; }
& .node rect, .node circle, .node ellipse, .node polygon, .node path {
fill: var(--quote-bg-color, #e8e8e8) !important; rect: var(--brand-color) !important;
}
& .edgeLabel {
background-color: var(--page-bg, #e8e8e8) !important; }
& .label text,
& span,
& p {
fill: var(--code-color, #333) !important; color: var(--code-color, #333) !important; }
& img {
filter: var(--page-image-filter, none) !important;
}
& .flowchart-link {
filter: invert(.8) !important;
}
}